<template>
  <div class="c-bg-sgray c-fs22">
    <div class="c-p">
      <div class="c-bg-white c-w100 c-pt40 c-pb24">
        <div :class="tablist.length == 2 ? 'c-ww360' : 'c-ww540'" class="c-mlr-auto">
          <div class="c-br8 theme-bd1 c-flex-row c-aligni-center c-fs24 c-h">
            <div class="c-ww180 c-lh60 c-textAlign-c" :class="[tablist.length > 2 && index == 1 ? 'theme-bd-r1 theme-bd-l1' : index == 2 && tablist.length == 4 ? 'theme-bd-r1' : '', tabIndex == index ? 'c-fc-white theme-bg' : 'c-fc-sblack c-bg-white', index == 0 ? 'br-tl6 br-bl6' : '', index == tablist.length - 1 ? 'br-tr6 br-br6' : '']" v-for="(item, index) in tablist" :key="index" @click="changeTab(index)">{{item.name}}</div>
          </div>
        </div>
        <div class="c-pt20 c-ph24 c-flex-row c-justify-sb c-aligni-center c-bg-white c-pb8">
          <my-small-tabbar :tabList="settlementStatus" :tabIndex="settlementIndex" :flexClass="'c-justify-start'" :isScroll="true" @changeTab="changeType"></my-small-tabbar>
          <div class="c-flex-row c-justify-sb c-aligni-center c-p">
            <popup-picker class="c-pr10 c-ww160 bd1-f6 c-br24 c-ph20 c-pv8" :title="''" :data="isFaShou? [revenueValue]:revenueList" v-model="revenueValue" placeholder="" @on-change="changeRevenueType" value-text-align="left" @on-show="showRevenue" @on-hide="hideRevenue"></popup-picker>
            <span class="iconfont c-pl8 c-fs18 c-pa c-p-r20 c-fc-xblack">{{arrowDirection ? '&#xe6ab;' : '&#xe6a9;' }}</span>
          </div>
        </div>
        <div class="c-mt24 c-mh24 c-p c-hh130 theme-bg c-br8 c-ph24 c-flex-row c-aligni-center c-justify-sb">
          <div class="c-flex-column">
            <div class="c-fs22 c-fc-white">订单数</div>
            <div class="c-fs32 c-fc-white c-fw600 c-mt8">{{myIncome.orderNum ? myIncome.orderNum : 0}}</div>
          </div>
          <div class="c-flex-column">
            <div class="c-fs22 c-fc-white">已结算</div>
            <div class="c-fs32 c-fc-white c-fw600 c-mt8">{{'￥' | iosPriceFilter}}{{myIncome.unFreezeMoney ? myIncome.unFreezeMoney : 0}}</div>
          </div>
          <div class="c-flex-column">
            <div class="c-fs22 c-fc-white">待结算</div>
            <div class="c-fs32 c-fc-white c-fw600 c-mt8">{{'￥' | iosPriceFilter}}{{myIncome.freezeMoney ? myIncome.freezeMoney : 0}}</div>
          </div>
        </div>
        <!-- <div class="c-pt40 c-pb20 c-bg-white c-fc-xblack c-ph24" v-if="tabIndex == 1">累计提现金额: {{'￥' | iosPriceFilter}}{{myIncome.withdrawedMoney > 0 ? myIncome.withdrawedMoney : '--'}}</div>
        <div class="c-pt20 c-ph24 c-bg-white c-pb8" v-if="tabIndex == 2">
          <my-small-tabbar :tabList="consumeList" :tabIndex="consumeIndex" :flexClass="'c-justify-start'" :isScroll="true" @changeTab="ChangeConsumeTab"></my-small-tabbar>
        </div> -->
      </div>
      <div id="box">
        <div>
          <div class="c-br10 c-ph24 c-bg-sgray c-pt20">
            <div class="c-pv20 c-bg-white c-mb20 c-br10" v-for="(item,index) in dataInfo" :key="index">
              <div class="c-flex-row c-justify-sb c-aligni-center c-ph24 c-bd-b1-f6 c-pb20" v-if="item.outType != 1 && item.outType != 2">
                <div class="c-flex-row c-aligni-center">
                  <img :src="$addXossFilter(item.avatar, require('@/assets/defult_head.png'))" alt="" class="c-hh56 c-ww56 c-brp50">
                  <span class="c-pl8 c-text-ellipsis1 c-maxw242 c-fc-xblack">{{item.nickname}}</span>
                </div>
                <div class="c-fc-gray">{{item.tag}}</div>
              </div>
              <div class="pt22 c-pb24 c-flex-row c-ph24">
                <div class="c-br10 c-ww180 c-hh120 c-text-hidden c-p">
                  <div v-if="item.prodType == cfrom.datum" class="c-ww180 c-hh120 c-center">
                    <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.img, require('@/assets/i/wap/datum/datumsDefault.png'))" alt="" />
                  </div>
                  <img
                    v-else-if="item.prodType == cfrom.agentApply || item.prodType == cfrom.partnerApply || item.prodType == cfrom.branchApply || item.prodType == cfrom.cooApply || item.prodType == cfrom.agencyApply || item.prodType == cfrom.agent6Apply || item.prodType == cfrom.agent7Apply || item.prodType == cfrom.agent8Apply || item.prodType == cfrom.agent9Apply"
                    v-lazy="$addXossFilter(item.img, require('@/assets/agentApply.png'))" class="c-w100 imgCloseBig" />
                  <vip-custom-img :cover="item.vipInfo.cover" :imgClass="'imgCloseBig c-br10'" :fontClass="{
                    boxStyle: 'c-pv20 c-pl12',
                    name: 'c-fs24 c-text-ellipsis1 c-fw-b',
                    duration: 'c-fs18'}" :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}" v-else-if="item.vipInfo && item.vipInfo.cover" />
                  <img v-else-if='item.prodType == cfrom.exam' v-lazy="(item.img==''||item.img==null)?require('../../../assets/examination_defult.png'):item.img" :key="item.img"
                    class="c-w100 imgCloseBig c-br10" />
                  <img v-else-if='item.prodType == cfrom.shareholderPayVoucher' v-lazy="require('@/assets/shareholderPayVoucher.png')"
                    class="c-w100 imgCloseBig c-br10" />
                  <img v-else v-lazy="(item.img==''||item.img==null)?require('../../../assets/defult270.png'):item.img" :key="item.img" class="c-w100 imgCloseBig c-br10" />
                  <div class="c-pa c-p-b0 c-p-l0 c-hh36 c-w100" v-if="item.refundType == 1 || item.refundType == 2">
                    <div class="c-w100 c-h c-bg-black c-opacity80 c-p"></div>
                    <div class="c-fc-white c-textAlign-c c-pa c-p-l0 c-p-t0 c-w100 c-h c-lh36">{{item.refundType == 1 ? '全额退款' : '部分退款'}}</div>
                  </div>
                </div>
                <div class="c-w0 c-flex-grow1 c-pl20">
                  <div class="c-fs26 c-fw-b c-text-ellipsis1 c-fc-xblack">{{item.prodName}}</div>
                  <div class="c-flex-row c-aligni-center c-pt12">
                    <span class="c-pr10 c-fc-gray">到账：{{incomeDestMap[item.dest]}}</span>
                  </div>
                  <div class="c-pt12 c-fc-gray" v-if="item.createdAt && !item.outType">创建时间: {{item.createdAt}}</div>
                  <div class="c-pt12 c-fc-gray" v-if="settlementIndex == 1">
                    <div v-if="item.outType == 1 || item.outType == 2">{{item.outType == 1 ? '中奖时间' : '领取时间'}}: {{item.createdAt}}</div>
                    <div v-else>结算时间: {{item.finishAt}}</div>
                  </div>
                </div>
              </div>
              <div v-if="item.outType == 1 ||item.outType == 2" class="c-ph20">
                <div class="c-pt20 bd-t1f6 c-flex-row c-justify-sb c-aligni-center c-fc-gray">
                  <span >{{item.outType == 1 ? '直播抽奖':'直播福利'}}</span>
                  <span class="theme-fc c-pl6 c-pr10">{{'￥' | iosPriceFilter}}{{item.amount}}</span>
                </div>
              </div>
              <div v-else class="c-ph20">
                <div class="c-pt20 bd-t1f6 c-flex-row c-justify-sb c-aligni-center c-fc-gray">
                  <div class="c-fc-gray">购买{{typeMap[item.prodType]}}</div>
                  <div class="c-flex-row c-justify-sb">
                    <div>实付{{'￥' | iosPriceFilter}}{{item.payMoney}}</div>
                    <div class="c-pl10">{{(item.type == 88 || item.type == 120 || item.type == 188) ? '退款' : '我的奖励'}}<span class="theme-fc c-pl6 c-pr10">{{'￥' | iosPriceFilter}}{{item.amount}}</span></div>
                  </div>
                </div>
              </div>
            </div>
            <loading-status-tem :noData="noneShow" :noMoreData="loadingStatus == 'NO_MORE_DATA' && !noneShow" :noDataText="'暂无相关明细'" :showLoading="isLoading">
            </loading-status-tem>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import { utilJs } from "@/utils/common.js"
import { PopupPicker } from 'ckjrweb-mp-ui/src/components/index';
import { DEFAULT_IMG_MAP } from "@/utils/constant.js";
export default {
  name: 'PromoteIncomeList',
  components: {
    MySmallTabbar,
    loadingStatusTem,
    VipCustomImg,
    PopupPicker
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      isFaShou: localStorage.getItem("isFaShou") == 1,
      DEFAULT_IMG_MAP:DEFAULT_IMG_MAP,
      isiOSApp: false,
      myIncome: '',
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
      companyId: localStorage.getItem("companyId"),
      tablist: [{
        type: 1,
        name: '直接推广'
      }, {
        type: 2,
        name: '间接推广'
      }, {
        type: 4,
        name: '商品关联人'
      }],
      tabIndex: 0,
      settlementStatus: [{
        title: '已结算',
        index: 1,
      }, {
        title: '待结算',
        index: 2,
      }],
      settlementIndex: 1, //已(待)结算索引
      typeBar: 1,
      arrowDirection: false,
      revenueValue: ["知识收入"],
      revenueList: [["知识收入", "推广收入"]],
      revenueIndex: 1, //1知识收入, 2推广收入, 3红包收入
      timeType: 0, //0:总计
      pageSize: 15,
      dataInfo: [],
      noneShow: false,
      loadingStatus: "NO_MORE_DATA",
      OFFICE_TYPE: ["doc", "docx", "pdf", "ppt", "pptx", "xls", "xlsx"],
      IMG_TYPE: [
        "bmp",
        "jpg",
        "png",
        "gif",
        "svg",
        "psd",
        "webp",
        "jpeg",
        "eps",
        "tga",
        "tiff"
      ],
      AUDIO_TYPE: [
        "ogg",
        "mp3",
        "wav",
        "asf",
        "wma",
        "mp3pro",
        "real",
        "ape",
        "module",
        "midi",
        "vqf"
      ],
      VIDEO_TYPE: [
        "avi",
        "wmv",
        "mpeg",
        "asf",
        "mpg",
        "dv",
        "rm",
        "rmvb",
        "mod",
        "flv",
        "mp4",
        "qt",
        "divx",
        "mkv",
        "vob"
      ],
      cfrom: global.ckFrom,
      incomeDestMap:{
        1: '账户余额',
        2: '微信余额',
        10: '账户余额',
        20: '分账中',
        30: '视频号账户'
      },
      typeMap: global.prodMapType,
      isLoading: false,
      overViewIsLoading: false,
      consumeList: [
        {
          title: '知识消费',
          index: 1,
        },
        {
          title: '商城消费',
          index: 2,
        },
        {
          title: '充值消费',
          index: 3,
        }
      ],
      learningIndex: 1, //知识消费页码
      mallLimit: 10,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
    }
  },
  created() {

  },
  mounted() {
  },
  computed: {

  },
  watch: {

  },
  filters: {
    filtersMonth(value) {
      if (value != undefined && value != "" && value != null) {
        return value.substr(5, 2);
      }
    },
    filtersYear(value) {
      if (value != undefined && value != "" && value != null) {
        return value.substr(0, 4);
      }
    }
  },
  methods: {
    changeTab(index) {
      this.tabIndex = index;
      this.settlementIndex = 1;
      this.revenueIndex = 1;
      this.revenueValue = ["知识收入"];
      this.learningIndex = 1;
      this.dataInfo = [];
      this.loadingStatus = "NO_MORE_DATA";
      // if (index == 2 && this.consumeIndex == 2) {
      //   this.getmallList();
      // } else {
      this.getRecordListList();
      this.getOverview();
      // }
    },
    // 已结算、待结算
    changeType(type) {
      this.settlementIndex = type;
      this.learningIndex = 1;
      this.dataInfo = [];
      this.getRecordListList();
      this.getOverview();
    },
    // 切换知识、分销、红包收入
    changeRevenueType(value) {
      if (value[0] == '知识收入') {
        this.revenueIndex = 1;
      } else if (value[0] == '推广收入') {
        this.revenueIndex = 2;
      } else {
        this.revenueIndex = 3;
      }
      this.arrowDirection = !this.arrowDirection;
      this.learningIndex = 1;
      this.dataInfo = [];
      this.getRecordListList();
      this.getOverview();
    },
    getOverview() {
      if (!this.overViewIsLoading) {
        this.overViewIsLoading = true;
        let url = `promote/userIncomeList?incomeType=${this.tablist[this.tabIndex].type}&status=${this.settlementIndex}&type=${this.revenueIndex}&isOverview=1`
        utilJs.getMethod(global.apiurl + url, res => {
          this.myIncome = res;
          this.overViewIsLoading = false;
        });
      }
    },
    // 获取知识消费记录
    getRecordListList() {
      if (!this.isLoading) {
        this.isLoading = true;
        let url = `promote/userIncomeList?incomeType=${this.tablist[this.tabIndex].type}&status=${this.settlementIndex}&type=${this.revenueIndex}&page=${this.learningIndex}&limit=${this.pageSize}`
        utilJs.getMethod(global.apiurl + url, res => {
          this.isLoading = false;
          if (this.learningIndex == 1) {
            this.dataInfo = res.data;
          } else {
            this.dataInfo = [...this.dataInfo, ...res.data];
          }
          if (this.dataInfo.length == 0) {
            this.noneShow = true;
            this.loadingStatus = "NO_MORE_DATA";
          } else {
            this.noneShow = false;
          }
          if (res.data && res.data.length < this.pageSize) {
            this.loadingStatus = this.learningIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.loadingStatus = 'HAS_MORE_DATA';
            this.learningIndex++;
          }
          this.isLoading = false;
        });
      }
    },
    showRevenue() {
      this.arrowDirection = true;
    },
    hideRevenue() {
      this.arrowDirection = false;
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(() => {
        if (that.loadingStatus == 'HAS_MORE_DATA') {
          // if (that.tabIndex == 2 && that.consumeIndex == 2) {
          //   that.getmallList();
          // } else {
          that.getRecordListList();
          // }
        }
      })
    },
  },
  activated() {
    //为了iosAPP审核通过
    this.isiOSApp = navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1;
    // 获取我的收益数据
    setDocumentTitle("我的奖励");// eslint-disable-line
    this.typeBar = 1;
    this.arrowDirection = false;
    this.revenueValue = ["知识收入"];
    this.revenueIndex = 1;
    this.timeType = 0;
    this.settlementIndex = 1;
    this.learningIndex = 1;
    this.dataInfo = [];
    this.noneShow = false;
    this.loadingStatus = "NO_MORE_DATA";
    this.isLoading = false;
    this.overViewIsLoading = false;
    this.myIncome = '';
    if (this.companyAuth && this.companyAuth.enableClassmate == 1) {
      this.tablist = [{
        type: 1,
        name: '直接推广'
      }, {
        type: 4,
        name: '商品关联人'
      }];
    } else {
      this.tablist = [{
        type: 1,
        name: '直接推广'
      }, {
        type: 2,
        name: '间接推广'
      }, {
        type: 4,
        name: '商品关联人'
      }];
    }
    this.typeMap = global.prodMapType;
    this.typeMap[global.ckFrom.qa] = localStorage.getItem("questionCustom") == 1 ? "预约专区" : "付费问答";
    this.typeMap[global.ckFrom.answer] = localStorage.getItem("questionCustom") == 1 ? "预约专区" : "付费问答";
    this.typeMap[global.ckFrom.circusee] = localStorage.getItem("questionCustom") == 1 ? "围观预约" : "围观问题";
    this.typeMap[global.ckFrom.agentApply] = JSON.parse(localStorage.getItem("customName")).agentName;
    this.typeMap[global.ckFrom.partnerApply] = JSON.parse(localStorage.getItem("customName")).partnerName;
    this.typeMap[global.ckFrom.branchApply] = JSON.parse(localStorage.getItem("customName")).branchName;
    this.typeMap[global.ckFrom.cooApply] = JSON.parse(localStorage.getItem("customName")).cooName;
    this.typeMap[global.ckFrom.agencyApply] = JSON.parse(localStorage.getItem("customName")).agencyName;
    this.typeMap[global.ckFrom.agent6Apply] = JSON.parse(localStorage.getItem("customName")).agent6Name;
    this.typeMap[global.ckFrom.agent7Apply] = JSON.parse(localStorage.getItem("customName")).agent7Name;
    this.typeMap[global.ckFrom.agent8Apply] = JSON.parse(localStorage.getItem("customName")).agent8Name;
    this.typeMap[global.ckFrom.agent9Apply] = JSON.parse(localStorage.getItem("customName")).agent9Name;
    utilJs.getGiftCardInfo().then(res => {
      this.typeMap[global.ckFrom.giftCard] = res.name || '虚拟币';
    })
    let enableTeamAward = localStorage.getItem('enableTeamAward');
    if ((this.vipType == 3 || this.vipType > 4) && enableTeamAward == 1) {
      this.tablist.splice(this.companyAuth && this.companyAuth.enableClassmate == 1 ? 1 : 2, 0, {
        type: 3,
        name: '团队管理奖'
      })
    }
    this.tabIndex = this.$route.query.tabIndex || 0
    this.getRecordListList();
    this.getOverview();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.loadingStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.c-bg-liner-change {
  background: -o-linear-gradient(-90deg, #ff8920, #ffffff);
  background: -ms-linear-gradient(-90deg, #ff8920, #ffffff);
  background: -moz-linear-gradient(-90deg, #ff8920, #ffffff);
  background: -webkit-linear-gradient(-90deg, #ff8920, #ffffff);
}
.incomeBox {
  width: calc(100% - 1.2rem);
}
.bd1-f6{border:1px solid #F6F6F6;}
.bd-t1b1{
  border-top: 1px solid #F6F6F6;
  border-bottom: 1px solid #F6F6F6;
}
.pt22{padding-top: 0.55rem;}
.bd-t1f6{border-top:1px solid #F6F6F6;}
.vux-cell-box >>> .vux-popup-picker-value {
  color: #333 !important;
}
.br-tl6{border-top-left-radius: 0.15rem}
.br-bl6{border-bottom-left-radius: 0.15rem}
.br-tr6{border-top-right-radius: 0.15rem}
.br-br6{border-bottom-right-radius: 0.15rem}
.minh1600{min-height: 40rem;}
.tabHeight {
  height: 52px;
}
.sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 1.4rem;
}
.fixed {
  position: fixed;
  width: 100%;
  top: 0;
}
</style>
